{% extends 'indexTemplate.html' %}

{% load static %}
{% block title %}首页 - 慕学在线网{% endblock %}
{% block customJs %}<script type="text/javascript" src="{% static '/js/index.js' %}"></script>{% endblock %}
{% block customBread %}{% endblock %}

{% block content %}
<div class="banner">
    <div class="wp">
        <div class="fl">
            <div class="imgslide">
                <ul class="imgs">
                {% for banner in banners %}
                    <li>
                        <a href="{{ banner.url }}">
                            <img width="1200" height="478" src="{{ MEDIA_URL }}{{ banner.image }}" />
                        </a>
                    </li>
                {% endfor %}
                </ul>
            </div>
            <div class="unslider-arrow prev"></div>
            <div class="unslider-arrow next"></div>
        </div>
    </div>
</div>
<section>
<div class="wp">
    <ul class="feature">
        <li class="feature1">
            <img class="pic" src="{% static '/images/feature1.png' %}"/>
            <p class="center">专业权威</p>
        </li>
        <li class="feature2">
            <img class="pic" src="{% static '/images/feature2.png' %}"/>
            <p class="center">课程最新</p>
        </li>
        <li class="feature3">
            <img class="pic" src="{% static '/images/feature3.png' %}"/>
            <p class="center">名师授课</p>
        </li>
        <li class="feature4">
            <img class="pic" src="{% static '/images/feature4.png' %}"/>
            <p class="center">数据真实</p>
        </li>
    </ul>
</div>
</section>
{#公开课程#}
<section>
<div class="module">
    <div class="wp">
        <h1>公开课程</h1>
        <div class="module1 eachmod">
            <div class="module1_1 left">
                <img width="228" height="614" src="/static/images/module1_1.jpg"/>
                <p class="fisrt_word">名师授课<br/>专业权威</p>
                <a class="more" href="{% url 'courses:coursePage' %}">查看更多课程 ></a>
            </div>
            <div class="right group_list">
                <div class="module1_2 box">
                    <div class="imgslide2">
                        <ul class="imgs">
                        {% for courseBanner in coursesBanners  %}
                            <li>
                                <a href="{% url 'courses:courseDetail' courseBanner.id %}">
                                    <img width="470" height="300" src="{{ MEDIA_URL }}{{ courseBanner.images }}" />
                                </a>
                            </li>
                        {% endfor %}
                        </ul>
                    </div>
                    <div class="unslider-arrow2 prev"></div>
                    <div class="unslider-arrow2 next"></div>
                </div>
                {% for couser in cousers %}
                <div class="module1_{{ forloop.counter|add:2 }} box">
                    <a href="{% url 'courses:courseDetail' couser.id %}">
                        <img width="233" height="190" src="{{ MEDIA_URL }}{{ couser.images }}"/>
                    </a>
                    <div class="des">
                        <a href="{% url 'courses:courseDetail' couser.id %}">
                            <h2 title="django入门">{{ couser.name }}</h2>
                        </a>
                        <span class="fl">难度：<i class="key">{{ couser.get_degree_display }}</i></span>
                        <span class="fr">学习人数：{{ couser.students }}</span>
                    </div>
                    <div class="bottom">
                        <span class="fl" title="慕课网">慕课网</span>
                        <span class="star fr">0</span>
                    </div>
                </div>
                {% endfor %}
            </div>
        </div>
    </div>
</div>
</section>
{#课程机构#}
<section>
    <div class="module greybg">
        <div class="wp">
            <h1>课程机构</h1>
            <div class="module3 eachmod">
                <div class="module3_1 left">
                    <img width="228" height="463" src="/static/images/module3_1.jpg"/>
                    <p class="fisrt_word">名校来袭<br/>权威认证</p>
                    <a class="more" href="{% url "orgs:orgPage" %}">查看更多机构 ></a>
                </div>
                <div class="right">
                    <ul>
                    {% for org in orgs %}
                        <li class="{% if forloop.counter|divisibleby:5 %}five{% endif %}">
                            <a href="{% url 'orgs:orgHome' org.id %}">
                                <div class="company">
                                    <img width="184" height="100" src="{{ MEDIA_URL }}{{ org.image }}"/>
                                    <div class="score">
                                        <div class="circle">
                                            <h2>全国知名</h2>
                                        </div>
                                    </div>
                                </div>
                                <p><span class="key" title="{{ org.name }}">{{ org.name }}</span></p>
                            </a>
                        </li>
                    {% endfor %}
                    </ul>
                </div>
            </div>
        </div>
    </div>
</section>
{% endblock %}

